// 引入nodejs中的核心模块
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
    // 配置项名1： 配置项值1，
    // 配置项名2： 配置项值2
    // mode: 'production',//设置打包方式，不可读的
    mode: 'production',//设置打包方式，还能略微看的懂一点点的
    entry: './src/js/main.js', // 入口文件
    devtool: 'source-map',
    // 配置 webpack-dev-server的选项
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new HtmlWebpackPlugin({
            minify: { // 压缩HTML文件
                removeComments: true, // 移除HTML中的注释
                collapseWhitespace: true, // 删除空白符与换行符
                minifyCSS: true// 压缩内联css
            },
            filename: 'index.html',
            // path.resolve()就是转成绝对路径
            template: path.resolve('./pulbic/index.html') // 指定模块的位置
        })
    ],// 设置plugin
    output: {
        "path": path.join(__dirname, '/build'), // 决定出口文件在哪里
        "filename": "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
    },
    module: { //处理非js模块
        // rules: 规则
        rules: [
            {
                test: /\.css$/, // 用正则匹配后缀名
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: { publicPath: '../' }
                    },
                    'css-loader', 'postcss-loader'
                ] // 设置要处理的loader // 如果匹配成功，就用use中指定的帮手
            },
            {
                test: /\.(png|svg|JPG)$/, //
                use: {
                    loader: 'url-loader',
                    // name: '[name]_[hash:8].[ext]',
                    options: {
                        limit: 3 * 1024, // 如果图片小于3k就转成base64,否则就直接拷贝
                        name: '[name].[ext]',
                        outputPath: './img' // 它会在出口文件夹下创建一个img文件夹来保存图片
                    }
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,  // 排除目录，通知webpack不要管这个目录下的js
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                ]
                // es6转es5
            }
        ]
    }
}